<template>
  <uni-page-wrapper>
    <uni-page-body>
      <uni-view class="paddingView">
        <uni-view class="timeView">
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker
                  @click="changePicker"
                  mode="date"
                  :value="startDateSearch"
                  :start="startDate"
                  :end="endDate"
                  @change="bindDateChange('startDateSearch', $event)"
                >
                  <view class="uni-input pick">{{ startDateSearch }}</view>
                </picker>
              </view>
            </view>
          </view>
          <uni-view class="label">to</uni-view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker
                  @click="changePicker"
                  mode="date"
                  :value="endDateSearch"
                  :start="startDate"
                  :end="endDate"
                  @change="bindDateChange('endDateSearch', $event)"
                >
                  <view class="uni-input pick">{{ endDateSearch }}</view>
                </picker>
              </view>
            </view>
          </view>
          <uni-view class="search" @click="search">{{$t("topuprecord.search")}}</uni-view>
        </uni-view>

        <uni-scroll-view class="list">
          <div class="uni-scroll-view">
            <div class="uni-scroll-view" style="overflow: hidden auto">
              <div class="uni-scroll-view-content">
				  <uni-view class="item" v-for="item in list" :key="item.id">
					  <uni-view class="top">
						  <uni-view class="left">{{item.state==0?$t("topuprecord.success"):(item.state==1?$t("topuprecord.Pending"):$t("topuprecord.failure"))}}</uni-view>
						  <uni-view class="right">+{{item.amount}}</uni-view>
					  </uni-view>
					  <uni-view class="bottom">{{item.time}}</uni-view>
				  </uni-view>
                <uni-view class="notMore">{{$t("topuprecord.No more data")}}</uni-view>
              </div>
            </div>
          </div>
        </uni-scroll-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from '@/store/service.js'
export default {
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    const lastDate = this.getDate('last');
    return {
		list:[],
      startDateSearch: lastDate,
      endDateSearch: currentDate,
      isPending: true,
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  onShow() {
  	this.search()
  },
  mounted() {
    this.changeToEng();
  },
  methods: {
    changeToEng() {
      const cancle = document.querySelectorAll(".uni-picker-action-cancel");
      const confirm = document.querySelectorAll(".uni-picker-action-confirm");
      cancle.forEach((element) => {
        element.innerText = "cancle";
      });
      confirm.forEach((element) => {
        element.innerText = "ok";
      });
    },
    changePicker() {
      setTimeout(() => {
        const temp = document.querySelectorAll(".uni-picker-view-content");
        for (let i = 0; i < 3; ++i) {
          const children = temp[i].childNodes;
          children.forEach((item) => {
            item.innerHTML = item.innerHTML.substring(
              1,
              item.innerHTML.length - 2
            );
          });
        }
      }, 100);
    },
    getDate(type) {
		var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
		var offset_GMT = new Date().getTimezoneOffset();
      const date = new Date(nowDate + offset_GMT * 60 * 1000 + 5.5 * 60 * 60 * 1000);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

	  if (type === "last") {
        day = day - 1;
      }
      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange(type, e) {
      this[type] = e.target.value;
    },
    search() {
      //调用搜索的接口
	  service.auth(this,service.api.app_setpay_list,{
		  limit: 1000000,
		  page: 1,
		  start: this.startDateSearch,
		  stop: this.endDateSearch
	  },function(self,res){
		  self.list = res.plus
	  })
    },
  },
};
</script>

<style>
@import url(./topUpRecord.css);
</style>